<a style="display: none" id="close1" href="#" class="modal-closer">Close</a>

<form method="post" enctype="multipart/form-data" id="sign-up-1-form" class="sky-form sky-form-modal"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/step1"
      style="width: 600px">

    <header>Personal Data</header>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" name="firstName" placeholder="First Name">
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" name="lastName" placeholder="Last Name">
                </label>
            </section>
        </div>

        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-lock"></i>
                    <input type="password" id="password1" name="password" placeholder="Password">
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-lock"></i>
                    <input type="password" name="passwordConfirm" placeholder="PW Confirmation">
                </label>
            </section>
        </div>
    </fieldset>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="select">
                    <select name="sex">
                        <option value="" selected disabled>Sex</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-calendar"></i>
                    <input type="text" name="birthday" id="birthday" placeholder="Date Of Birth">
                </label>
            </section>
        </div>

        <div class="row">
            <section class="col col-6">
                <label class="select">
                    <select name="citizenship">
                        <option value="" selected disabled>Citizenship</option>
                        <?php foreach ($this->countries as $country): ?>
                        <option value="<?php echo $country->id;?>"><?php echo $country->name;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-6">
                <label class="select">
                    <select name="residence">
                        <option value="" selected disabled>Current residence</option>
                        <?php foreach ($this->countries as $country): ?>
                        <option value="<?php echo $country->id;?>"><?php echo $country->name;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>

        <div class="row">
            <section class="col col-6">
                <label class="select">
                    <select name="motherTongue">
                        <option value="" selected disabled>Mother tongue</option>
                        <?php foreach ($this->languages as $lang): ?>
                        <option value="<?php echo $lang;?>"><?php echo $lang;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
            <section class="col col-6">
                <label class="select-multiple">
                    <select name="otherLanguages[]" class="select" multiple>
                        <option value="" disabled>Other languages</option>
                        <?php foreach ($this->languages as $lang): ?>
                        <option value="<?php echo $lang;?>"><?php echo $lang;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>
        <section>
            <label for="file" class="input input-file">
                <div class="button">
                    <input id="file" type="file" name="file" multiple
                           onchange="$('#ctxPhoto').val(this.value);">Browse
                </div>
                <input type="text" id="ctxPhoto" placeholder="Photo" readonly>
            </label>
        </section>
    </fieldset>

    <footer>
        <button type="submit" class="button">Next Step</button>
    </footer>
</form>

<script type="text/javascript">
    $(function () {
        $.validator.addMethod("xPassword", function (value, element) {
            return this.optional(element) || /^[a-z_A-Z_0-9]+$/.test(value);
        }, "password should be alpha or digit");

        // Date pickers
        $('#birthday').datepicker({
            dateFormat:'dd/mm',
            prevText:'<i class="icon-chevron-left"></i>',
            nextText:'<i class="icon-chevron-right"></i>',
            onSelect:function (selectedDate) {
            }
        });

        // Validation
        $("#sign-up-1-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        firstName:{
                            required:true
                        },
                        sex:{
                            required:true
                        },
                        citizenship:{
                            required:true
                        },
                        residence:{
                            required:true
                        },
                        lastName:{
                            required:true
                        },
                        password:{
                            xPassword:true,
                            required:true,
                            minlength:6
                        },
                        passwordConfirm:{
                            xPassword:true,
                            required:true,
                            minlength:6,
                            equalTo:"#password1"
                        }
                    },

                    // Messages for form validation
                    messages:{
                        firstName:{
                            required:'Please enter first name'
                        },
                        lastName:{
                            required:'Please enter last name'
                        },
                        sex:{
                            required:'Please enter sex'
                        },
                        citizenship:{
                            required:'Please enter citizenship'
                        },
                        residence:{
                            required:'Please enter residence'
                        },
                        password:{
                            required:'Please enter password'
                        },
                        passwordConfirm:{
                            required:'Please enter confirm password'
                        }
                    },

                    // Ajax form submit
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    beforeSend:function () {
                                        $('#sign-up-1-form button[type="submit"]').addClass('button-processing').attr('disabled', true);
                                    },
                                    uploadProgress:function (event, position, total, percentComplete) {
                                        $("#sign-up-1-form .progress").text(percentComplete + '%');
                                    },
                                    success:function () {
                                        $('#sign-up-1-form').fadeOut();
                                        $('#sky-form-modal-overlay').fadeOut();
                                        $('#lnk2').click();

                                        $('#sign-up-1-form button[type="submit"]').removeClass('button-processing').removeAttr('disabled');
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>